import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  View,
  Button,
  LayoutAnimation,
  Image,
  Text,
} from 'react-native';
import icon_avatar from '@/assets/images/default_avatar.png';
const LayoutAnimation布局动画9_12 = () => {
  const [showView, setShowView] = useState(false);

  const [showRight, setShowRight] = useState(false);

  useEffect(() => {
    console.log(showRight);
  }, [showRight]);
  return (
    <View style={styles.root}>
      <View style={styles.content1}>
        <Button
          title="按钮1"
          onPress={() => {
            LayoutAnimation.configureNext(
              // LayoutAnimation.Presets.linear
              // LayoutAnimation.Presets.spring
              LayoutAnimation.Presets.easeInEaseOut,
              () => {
                console.log('动画结束');
              },
              () => {
                console.log('动画异常');
              },
            );
            setShowView(!showView);
          }}></Button>
        {showView && <View style={styles.view} />}
      </View>
      <View style={styles.content2}>
        <Button
          title="按钮2"
          onPress={() => {
            // LayoutAnimation.linear();
            LayoutAnimation.spring();
            // LayoutAnimation.easeInEaseOut();
            // LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
            setShowRight(!showRight);
          }}></Button>
        <View
          style={[
            styles.view2,
            {flexDirection: showRight ? 'row-reverse' : 'row'},
          ]}>
          <Image style={styles.img} source={icon_avatar} />
          <Text style={styles.txt}>这是一行自我介绍的文本</Text>
        </View>
      </View>
    </View>
  );
};

export default LayoutAnimation布局动画9_12;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 500,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  content1: {
    width: '100%',
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: 'pink',
    backgroundColor: '#f9f9f9',
  },
  content2: {
    width: '100%',
    height: 200,
    // alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: 'pink',
    backgroundColor: '#f9f9f9',
  },
  view: {
    width: 100,
    height: 100,
    backgroundColor: '#cccccc',
    marginTop: 20,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  view2: {
    width: '100%',
    height: 100,
    backgroundColor: '#cccccc',
    marginTop: 20,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  img: {
    width: 64,
    height: 64,
    borderRadius: 32,
  },
  txt: {
    fontSize: 20,
    color: '#303030',
    fontWeight: 'bold',
    marginHorizontal: 20,
  },
});
